<template>
   <div class="main-card">
    <el-card class="box-card">
      <template #header>
        <span>菜单管理</span>
      </template>
      <el-form ref="ruleForm" :model="queryParams" label-width="100px">
        <div class="search-form">
          <el-form-item label="菜单名称">
            <el-input v-model="queryParams.menuName" clearable />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="queryParams.enable" clearable placeholder="请选择">
              <el-option
                label="正常"
                :value="1"
              />
              <el-option
                label="停用"
                :value="0"
              />
            </el-select>
          </el-form-item>
          <el-button style="margin-left: 20px" type="primary" @click="search">搜索</el-button>
        </div>
      </el-form>
      <div style="margin:20px 0;">
          <el-button  v-hasPermi="['system:menu:add']" type="primary" icon="el-icon-plus" @click="addOrUpdate()">添加</el-button>
      </div>
      <div>
        <el-table
          ref="myTable"
          :data="dataList"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          row-key="menuId"
          style="width: 100%"
        >
          <el-table-column
            prop="menuName"
            label="菜单名称"
            width="180"
          />
          <el-table-column
            prop="icon"
            label="图标"
            width="120"
          />
          <el-table-column
            prop="orderNum"
            label="排序"
            width="120"
          />
          <el-table-column
            prop="perms"
            label="权限标识"
            width="200"
          />
          <el-table-column
            prop="component"
            label="组件路径"
            width="200"
          />
          <el-table-column
            prop="enable"
            label="状态"
            width="120"
          >
            <template #default="{row}">
              {{ row.enable ? '正常' : '停用'}}
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            width="120"
            :formatter="dateFormat"
          />
          <el-table-column label="操作" width="250">
            <template v-slot="{ row }">
              <el-button v-hasPermi="['system:menu:edit']" type="primary" icon="el-icon-edit" @click="addOrUpdate(row)">修改</el-button>
              <el-button v-hasPermi="['system:menu:remove']" type="primary" icon="el-icon-delete" @click="deleteMenu(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <a-u-menu :value="isAUShow" @close="isAUShow = false" @onRefresh="search"/>
  </div>
</template>

<script lang="ts">
import { toRefs, reactive, defineComponent } from 'vue'
import { useStore } from 'vuex'
import { ElMessageBox, ElMessage } from 'element-plus'
import AUMenu from './component/AUMenu.vue'
import { handleTree } from '@/utils'
import tableList from '@/mixins/tableList'
import { Menu, StateType as MenuStateType } from '@/store/modules/system/menu'

interface QueryParamsType {
  menuName: string;
  enable: number | null;
}

interface DataType {
  isAUShow: boolean;
  dataList: Array<Menu>;
  queryParams: QueryParamsType;
}

export default defineComponent({
  name: 'Menu',
  components: { AUMenu },
  setup() {
    const { dateFormat } = tableList()
    const data = reactive<DataType>({
      isAUShow: false,
      queryParams: {
        menuName: '',
        enable: null
      },
      dataList: []
    })
    const store = useStore<{menu: MenuStateType}>()
    const search = () => {
      store.dispatch('menu/getMenuList', data.queryParams).then(res => {
        data.dataList = handleTree(res.data, 'menuId')
      }).catch()
    }
    const addOrUpdate = (row: Menu) => {
      store.commit('menu/SET_DATA', row)
      data.isAUShow = true
    }
    const deleteMenu = (row: Menu) => {
      const menuId = row.menuId
      ElMessageBox.confirm('您确定要删除"' + row.menuName + '"菜单吗, 是否继续?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return store.dispatch('menu/deleteMenu', menuId)
      }).then(() => {
        ElMessage({
          message: '删除成功',
          type: 'success'
        })
        search()
      }).catch()
    }
    search()
    return {
      ...toRefs(data),
      deleteMenu,
      addOrUpdate,
      search,
      dateFormat
    }
  }
})
</script>
